<template>
    <div>
        <!-- 顶部 -->
        <div class="top flex">
            <el-input v-model="data.keydown" placeholder="请输入内容" class="inp">
                <template #append>
                    <el-button :icon="Search">搜索</el-button>
                </template>
            </el-input>
            <el-button type="primary" :icon="Edit" @click="$router.push('/centralPoint/addand')">添加</el-button>
        </div>
        <!-- 表格 -->
        <el-table ref="multipleTableRef" :data="data.list" style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" />

            <el-table-column property="name" label="标题" />
            <el-table-column property="pic" label="图片">
                <template v-slot="{ row }">
                    <img width="100" :src="baseURL + row.pic.replace('public', '')" alt="">
                </template>
            </el-table-column>
            <el-table-column property="updatedAt" label="更新时间">
                <template v-slot="{ row }">
                </template>
            </el-table-column>
            <el-table-column property="status" label="状态">
                <template v-slot="{ row }">
                    <el-tag class="ml-2" type="success" v-if="row.status">开启</el-tag>
                    <el-tag class="ml-2" type="info" v-else>停用</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template v-slot="{ row }">
                    <el-button plain @click="$router.push('/centralPoint/update/' + row.id)">编辑</el-button>
                    <el-button type="danger" plain>删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination small background layout="prev, pager, next" :total="data.total" class="mt-4" />
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { Search, Edit } from '@element-plus/icons-vue'
import dayjs from 'dayjs';
import { baseURL } from '@/uitils/env'
import { getBannerList } from '@/api/banner'
const data: any = reactive({
    keydown: '',
    list: [],
    page: 1,
    limit: 10,
    total: 0
})
onMounted(() => {
    getBannerList({ page: data.page, limit: data.limit }).then((res): any => {
        console.log(res);
        data.list = res.data.map((item: any) => {
            item.updatedAt = dayjs(item.updatedAt).format('YYYY-MM-DD hh:mm:ss')
            return item
        })

    })
})
</script>
<style lang='scss' scoped>
.top {
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;

    .inp {
        width: 400px;
    }
}

.mt-4 {
    margin-top: 20px;
}
</style>